<template>
	<view class="couponPage">
		<!-- <view class="carCoupon">
			<view class="title flex_heng">
				<image :src="imgUrl + 'logo.png'" mode="" class="logoImg"></image>
				<view class="titleText">
					红星美凯龙·停车劵
				</view>
			</view>
			<view class="couponListBox">
				<view class="couponItem" v-for="(item,index) in couponList" :key="index">
					<view class="couponItemCon">
						<image src="/static/img/couponBg1.png" mode=""></image>
						<view class="itemAmount">
							￥{{item.amount}}
						</view>
						<view class="itemName">
							{{item.name}}
						</view>
						<view class="itemType">
							{{item.type}}
						</view>
						<view :class="item.state == 1?'itemState':'itemStateTwo'">
							{{item.state == 1?'已使用':'去使用'}}
						</view>
					</view>
				</view>
			</view>
			<view class="">
				
			</view>
		</view> -->
		<view class="top-view">
			<u-tabs :list="tabsList" :current="defultCurrent" keyName="name" :scrollable="false" :itemStyle="{
							 width:'20%',
							 height:'112rpx'
						 }" lineColor="transparent" :activeStyle="{
			    color: '#000000',
			    fontWeight: 'bold',
				padding:'0',
			    transform: 'scale(1.05)',
				fontSize:'28rpx'
			}" :inactiveStyle="{
			    color: '#333333',
			    transform: 'scale(1)',
				fontSize:'28rpx',
				padding:'0'
			}" @click="handleTab"></u-tabs>
		</view>

		<template v-if="defultCurrent == 0">
			<view class="shopCoupon">
				<view class="title flex_heng">
					<image :src="imgUrl + 'logo.png'" mode="" class="logoImg"></image>
					<view class="titleText">
						红星美凯龙·商品劵
					</view>
				</view>
				<view class="couponListBox">
					<view class="couponItem" v-for="(item,index) in couponList" :key="index">
						<view class="couponItemCon">
							<image :src="imgUrl + 'couponBg1.png'" mode=""></image>
							<view class="itemAmount">
								￥{{item.discountAmount}}
							</view>
							<view class="itemName">
								{{item.name}}
							</view>
							<view class="itemType">
								满{{item.conditionAmount}}减{{item.discountAmount}}
							</view>
							<view :class="item.isReceive?'itemState':'itemStateTwo'" @tap="ledCoupon(item)">
								{{item.isReceive?'已领取':'领取'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<template v-else>
			<view class="shopCoupon">
				<view class="title flex_heng">
					<image :src="imgUrl + 'logo.png'" mode="" class="logoImg"></image>
					<view class="titleText">
						红星美凯龙·商品劵
					</view>
				</view>
				<view class="couponListBox">
					<view class="couponItem" v-for="(item,index) in notUseCouponList" :key="index">
						<view class="couponItemCon">
							<image :src="imgUrl + 'couponBg1.png'" mode=""></image>
							<view class="itemAmount">
								￥{{item.discountAmount}}
							</view>
							<view class="itemName">
								{{item.name}}
							</view>
							<view class="itemType">
								满{{item.conditionAmount}}减{{item.discountAmount}}
							</view>
							<view :class="item.status==3 || item.status==2?'itemState':'itemStateTwo'" >
								{{item.status==3?'已使用':item.status==2?'已过期':'已领取'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>

</template>

<script>
	import {
		getCouponList,
		getUserCouponList,
		ledCoupon
	} from '@/api/api.js'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			// navber
		},
		data() {
			return {
				tabsList: [{
						id: 0,
						name: '全部优惠券'
					},
					{
						id: 1,
						name: '我的优惠券'
					},
				],
				imgUrl: this.$imgUrl,
				defultCurrent: 0,
				moreStatus: 'nomore',
				couponList: [],
				notUseCouponList: []
			};
		},
		computed: {
			...mapState(['hasLogin', 'safeAreaBottom'])
		},
		onLoad() {
			this.getCouponList();
		},
		onShow() {

		},
		onReachBottom() {
			if (this.defultCurrent === 0) {
				this.page++;
				this.getCouponList();
			}
		},
		methods: {

			handleTab(item) {
				console.log(item)
				this.defultCurrent = item.index
				this.couponList = [];
				this.page = 1
				// 我的
				if (item.id === 1) {
					this.getUserCouponList(1);
				} else {
					this.getCouponList();
				}
			},

			// 获取优惠券列表
			getCouponList() {
				getCouponList({
					pageNum: this.page,
					pageSize: 10,
					status: 2,
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						if (res.rows.length > 0) {
							this.couponList = [...this.couponList, ...res.rows]
						}
					}
				})
			},

			// 领取优惠券
			ledCoupon(item) {
				ledCoupon(item.id).then(res => {
					if (res.code == 200) {
						console.log(res);
						// this.getUserCouponList();
						// 提示领取成功
						uni.showToast({
							title: '领取成功',
							icon: 'none',
						});
						this.page = 1;
						this.couponList = [];
						this.getCouponList();
					}
				})
			},

			//用户优惠券
			getUserCouponList() {
				getUserCouponList({
					pageNum: this.page,
					pageSize: 1000,
				}).then(res => {
					if (res.code == 200) {
						console.log(res);
						this.notUseCouponList = res.rows; // 1-待使用
						// this.couponList = res.rows
					}
				})
			},
			//跳转购物车
			goshopCart() {
				uni.switchTab({
					url: '/pages/shopCart/shopCart'
				})
			},

			//返回上一页
			pageBackClick() {
				uni.navigateBack()
			},
			//去使用
			useCoupon(item) {
				console.log('item', item)
			},
		},
	};
</script>

<style lang="scss" scoped>
	.couponPage {
		width: 100vw;
		min-height: 100vh;
		padding: 28rpx;
		box-sizing: border-box;
		background: #f6f6f6;
		overflow: hidden;

		.top-view {
			width: 100%;
			background: #fff;
			display: flex;
			align-items: flex-end;
			position: fixed;
			top: 0;
			left: 0;

			// margin-top: 40rpx;
			::v-deep.u-tabs {
				width: 100%;
			}
		}

		.carCoupon {
			width: 100%;
			height: 530rpx;
			border-radius: 16rpx;
			background: #ffffff;
			padding: 28rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: 76rpx;
				justify-content: flex-start;

				.logoImg {
					width: 76rpx;
					height: 76rpx;
				}

				.titleText {
					margin-left: 16rpx;
					color: #000000;
					font-size: 32rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
				}
			}

			.couponListBox {
				width: 100%;

				.couponItem {
					width: 100%;
					height: 106rpx;
					margin-top: 28rpx;

					.couponItemCon {
						width: 100%;
						height: 106rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							lefr: 0;
						}

						.itemAmount {
							position: absolute;
							top: 50%;
							left: 18rpx;
							transform: translateY(-50%);
							color: #ff2424;
							font-size: 32rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemName {
							position: absolute;
							top: 16rpx;
							left: 162rpx;
							color: #ff0000;
							font-size: 28rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemType {
							position: absolute;
							top: 60rpx;
							left: 162rpx;
							color: #787878;
							text-align: left;
							font-size: 22rpx;
							font-weight: 300;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemState {
							position: absolute;
							top: 50%;
							right: 28rpx;
							transform: translateY(-50%);
							width: 114rpx;
							height: 46rpx;
							line-height: 46rpx;
							border-radius: 326rpx;
							opacity: 1;
							background: #666666;
							color: #ffffff;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemStateTwo {
							position: absolute;
							top: 50%;
							right: 28rpx;
							transform: translateY(-50%);
							width: 114rpx;
							height: 46rpx;
							line-height: 46rpx;
							border-radius: 326rpx;
							opacity: 1;
							background: #ff2424;
							color: #fff;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}
					}

				}
			}
		}

		.shopCoupon {
			margin-top: 100rpx;
			width: 100%;
			// height: 656rpx;
			border-radius: 16rpx;
			background: #ffffff;
			padding: 28rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: 76rpx;
				justify-content: flex-start;

				.logoImg {
					width: 76rpx;
					height: 76rpx;
				}

				.titleText {
					margin-left: 16rpx;
					color: #000000;
					font-size: 32rpx;
					font-weight: 500;
					font-family: "Alibaba PuHuiTi 2.0";
				}
			}

			.couponListBox {
				width: 100%;

				.couponItem {
					width: 100%;
					height: 106rpx;
					margin-top: 28rpx;

					.couponItemCon {
						width: 100%;
						height: 106rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							lefr: 0;
						}

						.itemAmount {
							position: absolute;
							top: 50%;
							left: 18rpx;
							transform: translateY(-50%);
							color: #ff2424;
							font-size: 32rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemName {
							position: absolute;
							top: 16rpx;
							left: 162rpx;
							color: #ff0000;
							font-size: 28rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemType {
							position: absolute;
							top: 60rpx;
							left: 162rpx;
							color: #787878;
							text-align: left;
							font-size: 22rpx;
							font-weight: 300;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemState {
							position: absolute;
							top: 50%;
							right: 28rpx;
							transform: translateY(-50%);
							width: 114rpx;
							height: 46rpx;
							line-height: 46rpx;
							border-radius: 326rpx;
							opacity: 1;
							background: #666666;
							color: #ffffff;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.itemStateTwo {
							position: absolute;
							top: 50%;
							right: 28rpx;
							transform: translateY(-50%);
							width: 114rpx;
							height: 46rpx;
							line-height: 46rpx;
							border-radius: 326rpx;
							opacity: 1;
							background: #ff2424;
							color: #fff;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							font-family: "Alibaba PuHuiTi 2.0";
						}
					}

				}
			}

		}
	}
</style>